<template>
  <div class="procurSUMM">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px" style="margin-top: 20px">

     <el-form-item label="计划月份" >
        <el-date-picker
          v-model="queryParams.planMonth"
          type="month"
          size="small"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="申请日期">
        <el-date-picker v-model="date" size="small" value-format="yyyy-MM-dd" class="datawidth"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
          @change="dateSelect"></el-date-picker>
      </el-form-item>
      <el-form-item label="入库步骤" >
        <el-select
          v-model="queryParams.storageSteps "
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="(dict,index) in storageSteps"
            :key="index"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请名称" >
        <el-input
          v-model="queryParams.pickName"
          placeholder="请输入申请名称"
          clearable
          size="small"
        />
      </el-form-item>
      <!-- <el-form-item label="战线区队" >
          <el-select size="small" v-model="queryParams.wnameSJ" placeholder="请选择区队战线"  style="width: 199px;" ref="selectReport">
            <el-option :value="queryParams.depId" :label="queryParams.deptName" style="width:199px;height:200px;overflow: auto;background-color:#fff">
              <el-tree
                highlight-current
                 accordion
                :data="reportData"
                :props="defaultProps"
                @node-click="handleNodeClickSJ"
              ></el-tree>
            </el-option>
          </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="审核状态" >
        <el-select
          v-model="queryParams.auditSteps"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="(dict,index) in shztList"
            :key="index"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
       <!-- <el-form-item label="费用项目" >
        <el-select
          v-model="queryParams.cpName"
          placeholder="请选择费用项目"
          clearable
          size="small"
        >
          <el-option
            v-for="(dict,index) in fee"
            :key="index"
            :label="dict.cpName"
            :value="dict.cpName"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button   type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
        <!-- <el-button  v-hasPermi="['warehouseManagement:theOtherRKSQ:cgjhadd']" type="success" icon="el-icon-plus" size="mini" @click="cgjhadd">新增申请</el-button> -->
        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportList" v-hasPermi="['warehouseManagement:index:export']">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="roleList" stripe >
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="审核状态"   property="storageSteps"  width="100" >
        <template slot-scope="scope" style="text-align: center">
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.storageSteps==1">未提交</div>
          <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.storageSteps==2">经管科</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.storageSteps==3">财务</div>
          <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.storageSteps==4">入库</div>
          <div style="background:#EE113D  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.storageSteps==5">驳回</div>
          <div style="background:#13ce66  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.storageSteps==6">完成</div>

        </template>
      </el-table-column>
      <el-table-column align="center" label="入库计划名称"  property="pickName" ></el-table-column>
      <el-table-column align="center" label="计划月份" property="planMonth" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="用途"  property="useing" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="计划号"  property="planNum" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="金额"  property="amount" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="创建时间"  property="crtTime" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="400px"
      >
        <template slot-scope="scope">
          <!-- <el-button
            v-show="scope.row.storageSteps==1 || scope.row.storageSteps==5"
            type="warning"
            icon="el-icon-check"
            size="mini"
            v-hasPermi="['warehouseManagement:theOtherRKSQ:tijiao']"
            @click="tijiao(scope.$index, scope.row)">提交</el-button> -->
          <el-button
            size="mini"
            type="success"
            icon="el-icon-s-unfold"
            @click="xingqing(scope.row)">详情</el-button>
          <!-- <el-button
            size="mini"
            v-show="scope.row.storageSteps==1 ||scope.row.storageSteps==5"
            type="primary"
            v-hasPermi="['warehouseManagement:theOtherRKSQ:handleEdit']"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            v-show="scope.row.storageSteps==1 || scope.row.storageSteps==5"
            type="danger"
            v-hasPermi="['warehouseManagement:theOtherRKSQ:handleDelete']"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="bottomflot">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="search"
      >
      </pagination>
      <span class="box">当页总金额: <b>{{curPageAmount}}</b>   总金额: <b>{{curMonthAmount}}</b> </span>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'

  export default {
    name: "Role",
    components:{

    },
    data() {
      return {
          //记录分页数据
        localPage:undefined,
        localSize:undefined,
        //时间范围
        date:[],
        shifouList:[
          {value:'1',label:'是'},
          {value:'2',label:'否'}
        ],
        //审核状态
        // shztList:[
        //   {value:'1',label:'未提交'},
        //   {value:'2',label:'待审核'},
        //   {value:'3',label:'驳回'},
        //   {value:'4',label:'通过'}
        // ],
        //仓库
        statusCK:[
          {value:'1',label:'1111'}
        ],
        kuncunData:{},
        kucunShow:false,
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 角色表格数据
        roleList: [],
        // 日期范围
        dateRange: [],
        //入库步骤
        storageSteps:[
          { value: '1',label: '未提交'},
          { value: '2',label: '经营科'},
          { value: '3',label: '财务'},
          { value: '4',label: '入库'},
          { value: '5',label: '驳回'},
          { value: '6',label: '完成'},
        ],
        //科室
        keshiList:[
          { value: '1',label: '科室1'},
          { value: '2',label: '科室2'},
          { value: '3',label: '科室3'},
        ],
        // 状态数据字典
        statusOptions: [
          { value: '1',label: '进行中'},
          { value: '2',label: '已结束'},
          { value: '3',label: '未提交'},
        ],
        // 数据范围选项
        dataScopeOptions: [
          {
            value: "1",
            label: "全部数据权限"
          },
          {
            value: "2",
            label: "自定数据权限"
          },
          {
            value: "3",
            label: "本部门数据权限"
          },
          {
            value: "4",
            label: "本部门及以下数据权限"
          },
          {
            value: "5",
            label: "仅本人数据权限"
          }
        ],
        // 菜单列表
        menuOptions: [],
        // 部门列表
        deptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pickName:'',
          storageSteps:'',
        //   auditSteps:'',
          planMonth:'',
          startDate:'',
          endDate:'',
          isStorage:'2'
        },
        // 表单参数
        form: {},
        defaultProps: {
          children: "childList",
          label: "wname"
        },
        //当页总金额
        curPageAmount:'',
        //当月总金额
        curMonthAmount:'',
      };
    },
    created() {
      var myDate = new Date();
      var pp =myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
      if(pp<9){
        pp = "0"+pp
      }
      this.queryParams.planMonth = myDate.getFullYear()+'-'+pp;
      this.jlPage()
      this.search()

    },
    methods: {
      /** 导出按钮操作 */
      exportList() {
        this.$confirm('是否确认导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.derive()
          console.log(456)
          // return this.download(res.data)
        }).catch((e)=> {
        })
      },
      setValueNull(){
        this.queryParams.waId = null;
      },
       //记录页码数据
      jlPage () {
      this.localSize = this.$route.query.size
      this.localPage = this.$route.query.page
      console.log(this.$route.query.page)
      if(this.localPage!==undefined) {
          this.queryParams.pageNum = this.localPage
          console.log(111)
      }
      if(this.localSize!==undefined) {
        this.queryParams.pageSize = this.localSize
      }
      },
      //导出
      derive() {
        this.loading = true
        var queryParams = new Object();
        Object.keys(this.queryParams)
          .forEach(k=> queryParams[k] = this.queryParams[k]);
        if(queryParams.endDate){
          if(queryParams.endDate)
            queryParams.endDate = queryParams.endDate + " 23:59:59"
        }
        request({
          url: '/material/apply/statistics/exportWithAmount',
          method: 'get',
          params:queryParams
        }).then(response => {
          this.loading = false
           return this.download(response.data)
        });
      },
      //转换时间戳
      zhuanhuanDate:function(row){
        var oldTime = new Date(row)
        var year=oldTime.getFullYear();
        var month=oldTime.getMonth()+1;
        var date=oldTime.getDate();
        var pp = year+'-'+month+'-'+date
        return  pp
      },
      dateSelect() {
        if(this.date) {
            this.queryParams.startDate = this.date[0],
            this.queryParams.endDate = this.date[1]
        }else if(this.date==null) {
            this.queryParams.startDate='',
            this.queryParams.endDate =''
        }
      },
      //审核
      shenhe:function(index,row){

      },
    //   handleEdit:function (index,row) {
    //     console.log('编辑',row)
    //     var pp={
    //       leixng:'put',
    //       row:row
    //     }
    //     this.$router.push({path:'/warehouseManagement/theOtherAdd',query:pp});
    //   },
      //新增
      cgjhadd:function () {
        var pp={
          leixng:'post',
        }
        this.$router.push({path:'/warehouseManagement/theOtherAdd',query:pp});
      },
      //库存管理返回
      kucunBack:function(row){
        this.kucunShow = false
        console.log('返回数据',row)

      },
      //查询
      search:function(){
        this.loading = true
        this.localPage = this.queryParams.pageNum
        this.localSize = this.queryParams.pageSize
        var queryParams = new Object();
        Object.keys(this.queryParams)
          .forEach(k=> queryParams[k] = this.queryParams[k]);
        if(queryParams.endDate){
          if(queryParams.endDate)
            queryParams.endDate = queryParams.endDate + " 23:59:59"
        }
        request({
          url: '/material/apply/statistics/listWithAmount',
          method: 'get',
          params:queryParams
        }).then(response => {
          this.loading = false
          console.log(response)
          this.roleList = response.rows
          this.curPageAmount = response.additionalData.curPageAmount
          this.curMonthAmount = response.additionalData.curMonthAmount
          // for (var i=0;i<this.roleList.length;i++){
          //   if(this.roleList[i].crtTime){
          //     this.roleList[i].crtTime = this.zhuanhuanDate(this.roleList[i].crtTime)
          //   }
          // }
          this.total = response.total

        });


      },
      //详情
      xingqing:function (row) {
        var pp={
          row:row
        }
        this.$router.push({path:'/warehouseManagement/InboundSummaryXQ',query:{pp,page:this.localPage,size:this.localSize}});
      },
    }
  };
</script>

<style lang="scss">
  .procurSUMM {
    .bottomflot {
      height: 80px;

    }
    .pagination-container {
      display: inline-block;
      position: relative;
      height: 25px;
      margin-bottom: 10px;
      margin-top: 15px;
      padding: 10px 20px !important;
      float: right;
    }
    .box{
      float: left;
      font-size: 13px;
      color: #606266;
      line-height: 80px;
      margin-left: 15px;
    }
     .datawidth {
    width: 250px;
  }
.el-input--small .el-input__inner {
  width: 250px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
   width: 250px;
}
  }
</style>
